<template>
  <div class="spell-listen-test-item">
    <h3 class="item-title">
      <span class="title">{{ wordData.content }}</span>
      <div v-if="isSubmit" class="score">
        {{ wordData.score || "0" }}
      </div>
      <div v-if="!isSubmit && wordData.fileData">
        <AudioPlay
          class="ml5"
          :type="1"
          :audioSrc="wordData.fileData"
        ></AudioPlay>
      </div>
    </h3>
    <p class="item-paraphrase">
      <span v-html="wordData.parse"></span>
    </p>
    <div class="item-contain mt30">
      <div class="item-contain-left" v-if="!isSubmit">
        <AudioRecord
          :type="2"
          @start="handleStart"
          @ended="handleEnd"
          @clickEnd="audioRecordEnd()"
          @beforeSatrt="beforeRecordSatrt"
          :ref="`audioRecord-${wordData.id}`"
          :maxTime="10000"
        ></AudioRecord>
      </div>
      <div class="item-contain-left" v-if="isSubmit">
        <div v-if="wordData.result" class="word-record-score-detail">
          <!-- <div class="score-detail-item" v-if="wordData.result.phoneme.letters">
            <label class="score-detail-item-label">标准字母序列:</label>
            <span class="score-detail-item-content">{{
              wordData.result.phoneme.letters
            }}</span>
          </div> -->
           <!-- <label class="score-detail-item-label"> 标准发音音素序列: </label> -->
          <!-- <div class="score-detail-item">
            <span class="score-detail-item-content">
              [<el-tooltip
                v-for="(item, index) in wordData.result.phone.filter(
                  (item) => item.lab && item.lab != '#'
                )"
                :key="index"
                class="item"
                effect="dark"
                :content="errType[item.is_err]"
                placement="bottom"
                :disabled="item.is_err == 0"
                ><span
                  class="phonetic-text"
                  :class="
                    item.is_err != 0 ? 'red-color-text' : 'green-color-text'
                  "
                  >{{ $phoneme2phonetic(item.lab) }}</span
                > </el-tooltip
              >]
            </span>
          </div> -->

          <!-- <div
            class="item-content item-syllable score-detail-item mt10"
            v-if="Array.isArray(wordData.result.stress)"
          >
            <label class="score-detail-item-label label-light">重读音节:</label>
            <span class="score-detail-item-content">
              <span
                class="mr10"
                v-for="(item, index) in wordData.result.stress.filter(
                  (item) => item.ref == 1
                )"
                :key="index"
              >
                <span
                  v-for="(item2, index2) in item.char.split('_')"
                  :key="index2"
                  class="phonetic-text-small"
                  :class="
                    item.score != 1 ? 'red-color-text' : 'green-color-text'
                  "
                  >{{ $phoneme2phonetic(item2) }}</span
                >
              </span>
            </span>
          </div> -->
          <div class="score-detail-item mt20">
            <span class="score-detail-item-label label-flex">
              <span> 我的读音:</span>
              <AudioPlay
                class="ml5"
                :type="2"
                :audioSrc="wordData.fileData"
              ></AudioPlay>
            </span>
            <!-- <span class="score-detail-item-content mt5">
              [<el-tooltip
                v-for="(item, index) in wordData.result.phone.filter(
                  (item) => item.rec && item.rec != '#'
                )"
                :key="index"
                class="item"
                effect="dark"
                :content="errType[item.is_err]"
                placement="bottom"
                :disabled="item.is_err == 0"
                ><span
                  class="phonetic-text"
                  :class="
                    item.is_err != 0 ? 'red-color-text' : 'green-color-text'
                  "
                  >{{ $phoneme2phonetic(item.rec) }}</span
                > </el-tooltip
              >]
            </span> -->
          </div>
        </div>
        <div v-else class="word-record-score-detail">
          <div class="score-detail-item mt20">
            <span class="score-detail-item-label label-flex">
              <span> 我的读音:</span>
              <AudioPlay
                v-if="wordData.fileData"
                class="ml5"
                :type="2"
                :audioSrc="wordData.fileData"
              ></AudioPlay>
              <span class="red-color-text">未读</span>
            </span>
          </div>
        </div>
      </div>
      <div class="item-contain-right">
        <el-image
          style="width: 150px; height: 130px"
          :src="wordData.img"
          fit="contain"
        ></el-image>
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay.vue";
import AudioRecord from "@/components/AudioRecord.vue";
export default {
  data() {
    return {
      hasRecording: false,
      //音素发音错误类型
      errType: {
        0: "发音结果正确",
        1: "多读",
        2: "漏读",
        3: "错读",
        4: "没有浊化",
      },
    };
  },
  props: {
    wordData: {
      type: Object,
    },
    spellId: {
      type: Number,
    },
    isSubmit: {
      type: Boolean,
    },
  },
  methods: {
    handleStart() {
      console.log("开始");
      this.hasRecording = true;
    },
    handleEnd() {
      console.log("结束");
      this.hasRecording = false;
    },
    // 点击录音开始前的回调
    beforeRecordSatrt() {
      this.$pauseAllAudio();
      this.$emit("pauseRecord");
    },
    pauseRecord() {
      if (this.hasRecording) {
        this.$refs[`audioRecord-${this.wordData.id}`].clickStop();
      }
    },
    // 点击结束录音的回调
    // sentence_id=181&content=I'm Mike.
    // http://localhost:8101/sound/save?word_id=121&word_name=testcc&is_child=1&accent=1
    audioRecordEnd() {
      let blob = this.$refs[`audioRecord-${this.wordData.id}`].getMp3Data();
      let file = new window.File([blob], this.wordData.id + ".mp3", {
        type: blob.type,
      });
      let formData = new FormData();
      formData.append("sound_file", file);
      formData.append("element_id", this.spellId);
      formData.append("word_name", this.wordData.content);
      formData.append("spell_id", this.wordData.id);
      formData.append("accent", this.$store.getters.isBritish ? 1 : 2);
      formData.append("is_child", 1);
      formData.append("source", 2);
      this.$emit("postSpellVoice", formData, blob);
    },
  },
  components: {
    AudioPlay,
    AudioRecord,
  },
};
</script>
